<template>
  <BasicTabs v-model="tabname" :tabs="tabs" @tabChange="tabsChange"> </BasicTabs>
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import BoundRecord from './components/boundRecord.vue'
  import LocationVisualization from './components/locationVisualization.vue'
  import LocationDetail from './components/locationDetail.vue'
  import InventoryCount from './components/inventoryCount.vue'

  const tabname = ref()
  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: '15210',
      label: '出库记录',
      roles: ['15210'],
      isFit: true,
      slots: { default: h(BoundRecord, { type: 'out' }) }
    },
    {
      name: '15220',
      label: '入库记录',
      roles: ['15220'],
      isFit: true,
      slots: { default: h(BoundRecord, { type: 'in' }) }
    },
    {
      name: '15230',
      label: '货位可视化',
      roles: ['15230'],
      slots: { default: h(LocationVisualization) }
    },
    {
      name: '15240',
      label: '货位详情',
      roles: ['15240'],
      slots: { default: h(LocationDetail) }
    },
    {
      name: '15250',
      label: '库存盘点',
      roles: ['15250'],
      isFit: true,
      slots: { default: h(InventoryCount) }
    }
  ])

  const tabsChange = (tab) => {
    console.log(tab)
  }
</script>
